<!-- 动态表单 -->
<template>
  <el-form label-width="80px" :model="formData">
    <el-form-item v-for="form in formOptions" :key="form.id" :label="form.name">
      <el-input
        v-if="form.type === 'input' && form.showItem"
        v-model="formData[form.modelValue]"
      ></el-input>
      <el-select
        v-if="form.type === 'select' && form.showItem"
        v-model="formData[form.modelValue]"
      >
        <el-option
          v-for="selectItem in form.selectOptions"
          :key="selectItem.id"
          :label="selectItem.name"
          :value="selectItem.value"
        ></el-option>
      </el-select>
      <el-checkbox-group
        v-if="form.type === 'checkbox' && form.showItem"
        v-model="formData[form.modelValue]"
      >
        <el-checkbox
          v-for="selectItem in form.selectOptions"
          :key="selectItem.id"
          :label="selectItem.name"
          :name="selectItem.value"
        ></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "DynamicForm",
  data() {
    return {
      formOptions: [
        {
          id: 1,
          type: "input",
          name: "活动名称",
          modelValue: "name",
          showItem: true,
        },
        {
          id: 2,
          type: "select",
          name: "活动区域",
          modelValue: "region",
          selectOptions: [
            {
              id: 1,
              name: "区域一",
              value: "shanghai",
            },
            {
              id: 2,
              name: "区域二",
              value: "beijing",
            },
          ],
          showItem: true,
        },
      ],
      formData: { name: null, region: null },
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped></style>
